<template>
	<div class="bar" v-on:click="getDetail">
		<div class="baritem p3">
			<p class="text-center">{{ dateString }}</p>
		</div>
		<div class="baritem p5">
			<p class="text-left">{{ purpose }}</p>
		</div>
		<div class="baritem p2">
			<p class="text-center">{{ amountString }}</p>
		</div>
<!-- 		<div class="baritem p1">
			<button v-on:click="getDetail"><img src="../assets/info.png"></button>
		</div> -->
	</div>
</template>

<script>

// 金额，用途，类型，日期，所有者，备注

import {bus} from '../main.js'

function daysAhead(date){
	return parseInt((new Date().getTime() - date.getTime()) / 86400000)
}

export default {
	name: 'accountbar',
	props: ['accountid'],
	data() {
		return {
			amount: 0,
			purpose: '',
			timeStamp: 0,
			owner: null
		}
	},
	methods: {
		getDetail: function(){
			bus.$emit('show_detail_modal', this.accountid)
		}
	},
	mounted: function(){
		let decodedAccount = window.delegate.getAccount(this.accountid)
		this.amount = decodedAccount.amount
		this.timeStamp = decodedAccount.timeStamp
		this.purpose = decodedAccount.purpose
		this.owner = decodedAccount.owner
	},
	computed: {
		amountString: function(){
			if(this.amount < 0){
				return '- ¥' + (-this.amount).toString()
			}else{
				return '+ ¥' + this.amount.toString()
			}
		},
		dateString: function(){
			let date = new Date(this.timeStamp)
			let ahead = daysAhead(date)
			let hour = date.getHours()
			let minute = date.getMinutes()
			if(minute < 10){
				minute = '0' + minute.toString()
			}
			if(ahead == 0){
				return `今天${hour}: ${minute}`
			}else if(ahead == 1){
				return `昨天${hour}: ${minute}`
			}else if(ahead == 2){
				return `前天${hour}: ${minute}`
			}else{
				let month = date.getMonth() + 1
				let day = date.getDate()
				return `${month}月${day}日 ${hour}:${minute}`
			}
		},

	}
}
</script>

<style scoped>
.bar{
	width: 60%;
	margin: 10px 20%;
	border-radius: 10px;
	background-color: black;
	opacity: .8;
	cursor: pointer;
}

.darkred{
	background-color: darkred;
}

.blue{
	background-color: blue;
}

.baritem{
	display: inline-block;
	margin-right: -4px;
}

.baritem p{
	color: white;
	font-family: sans-serif;
	font-size: 16px;
}

.text-center{
	text-align: center;
}

.text-left{
	text-align: left;
}

.p2{
	width: 20%;
}

.p3{
	width: 30%;
}

.p5{
	width: 50%;
}
</style>